<template>
  <div id="user-profile" class="pink-bg">
    <van-form @submit="onSubmit">
      <van-field label="用户" v-model="userForm.id" type="text" readonly class="pink-field" />
      <van-field label="用户" v-model="userForm.name" type="text" placeholder="请输入用户"
        :rules="[{ pattern:regNamePwd,required: true, message: '无效用户名' }]" class="pink-field" />
      <van-field label="邮箱" v-model="userForm.email" type="email" placeholder="请输入邮箱"
        :rules="[{ pattern:regEmail, message: '无效邮箱' }]" class="pink-field" />
      <van-field label="电话" v-model="userForm.phone" type="tel" placeholder="请输入电话"
        :rules="[{ pattern:regPhone, message: '无效手机号码' }]" class="pink-field" />
      <van-field name="radio" label="性别">
        <template #input>
          <van-radio-group v-model="userForm.gender" direction="horizontal">
            <van-radio :name="1" class="pink-radio">男</van-radio>
            <van-radio :name="0" class="pink-radio">女</van-radio>
          </van-radio-group>
        </template>
      </van-field>
      <van-field label="昵称" v-model="userForm.nick_name" type="text" placeholder="请输入昵称" class="pink-field" />
      <van-field name="uploader" label="头像">
        <template #input>
          <van-uploader name="avatar" v-model="avatarList" :max-count="1" :after-read="afterRead" class="pink-uploader" />
        </template>
      </van-field>
      <div style="margin: 16px;">
        <van-button round block type="info" native-type="submit" class="pink-button">提交</van-button>
      </div>
    </van-form>
  </div>
</template>

<script>
  import { showToast } from 'vant';
  import { getDetailByIdAPI, updateAPI, uploadAvatarAPI } from "@/api/user.js";
  import { getUserLocal } from "@/utils/auth.js";

  export default {
    data() {
      return {
        userForm: {
          id: null,
          name: "",
          email: "",
          phone: "",
          gender: 1,
          avatar: "",
          nick_name: "",
        },
        avatarList: [],
        regNamePwd: /^[a-z0-9]{3,12}$/i,
        regPhone: /^((13[0-9])|(14[5|7])|(15([0-3]|[5-9]))|(18[0,5-9]))\d{8}$/,
        regEmail: /^[a-zA-Z0-9_-]+@[a-zA-Z0-9_-]+(\.[a-zA-Z0-9_-]+)+$/,
      };
    },

    created() {
      let id = getUserLocal().id;
      getDetailByIdAPI(id).then(result => {
        this.userForm = result.data;
        this.avatarList = [];
        this.avatarList.push({
          url: this.APIDomainName + this.userForm.avatar
        });
      });
    },

    methods: {
      afterRead(file) {
        file.status = 'uploading';
        file.message = '上传中...';
        uploadAvatarAPI(file.file).then(result => {
          file.status = '';
          file.message = '';
          this.avatarList = [];
          this.avatarList.push({
            url: this.APIDomainName + result.url
          })
          this.userForm.avatar = result.url;
        });
      },

      onSubmit() {
        let user = this.userForm;
        updateAPI(user).then(() => {
          showToast("更新成功！");
          this.$router.push({
            name: "user"
          });
        });
      },
    },
  };
</script>

<style lang="less" scoped>
 .pink-bg {
    background-color: #fdf2f8;
    min-height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
  }

  van-form {
    background-color: white;
    padding: 20px;
    border-radius: 10px;
    box-shadow: 0 4px 8px rgba(255, 107, 139, 0.1);
  }

 .pink-field {
    margin-bottom: 15px;
    border: 1px solid #fce4ec;
    border-radius: 6px;
    :deep(.van-field__label) {
      color: #ff6b8b;
    }
    :deep(.van-field__control) {
      color: #333;
    }
  }

 .pink-radio {
    color: #ff6b8b;
    :deep(.van-radio__icon--checked) {
      color: #ff6b8b;
    }
  }

 .pink-uploader {
    :deep(.van-uploader__upload) {
      border-color: #f8bbd0;
      background-color: #fff0f3;
    }
    :deep(.van-icon) {
      color: #ff6b8b;
    }
  }

 .pink-button {
    background-color: #ff6b8b;
    color: white;
    border: none;
    box-shadow: 0 2px 4px rgba(255, 107, 139, 0.2);
  }
</style>